export default function FunnelPage({ branding, navigate, onContactSubmit }) { const [formData, setFormData] = useState({ name: '', email: '', phone: '', message: '' }); const [status, setStatus] = useState('idle'); const [qStatus, setQStatus] = useState('idle'); const [qData, setQData] = useState({ name: '', email: '', phone: '', city: '', mustHaves: '', dealbreaker: '', excitesMost: '', biggestConcerns: '', homeType: '', childrenPets: '', hobbies: '', hangouts: '', snacks: '', interests: '', shops: '', commMethod: '', commTime: '', detailLevel: '', coffeeOrder: '', entertainment: '', threeWords: '', winExperience: '', anythingElse: '', hearAboutUs: '', }); // Form state for native questionnaire const [mobileOpen, setMobileOpen] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); if (!formData.name.trim() || !formData.email.trim()) return; setStatus('sending'); try { await onContactSubmit({ name: formData.name, email: formData.email, phone: formData.phone, message: formData.message, }); setStatus('sent'); setFormData({ name: '', email: '', phone: '', message: '' }); } catch { setStatus('error'); } }; const handleQuestionnaireSubmit = async (e) => { e.preventDefault(); if (!qData.name.trim() || !qData.email.trim()) return; setQStatus('sending'); const message = `HOMEBUYER QUESTIONNAIRE RESPONSE --- BASIC INFORMATION --- Name: ${qData.name} Email: ${qData.email} Phone: ${qData.phone || 'Not provided'} City/Area: ${qData.city || 'Not provided'} --- HOME SEARCH --- Top 3 Must-Haves: ${qData.mustHaves || 'Not provided'} Absolute Dealbreaker: ${qData.dealbreaker || 'Not provided'} What Excites You Most: ${qData.excitesMost || 'Not provided'} Biggest Concerns/Stresses: ${qData.biggestConcerns || 'Not provided'} Home Type: ${qData.homeType || 'Not provided'} --- GETTING TO KNOW YOU --- Children or Pets: ${qData.childrenPets || 'Not provided'} Outside-of-Work Enjoyment: ${qData.hobbies || 'Not provided'} Favorite Restaurants/Coffee Shops: ${qData.hangouts || 'Not provided'} Favorite Snacks/Drinks/Treats: ${qData.snacks || 'Not provided'} Hobbies, Sports Teams, Interests: ${qData.interests || 'Not provided'} Favorite Places to Shop: ${qData.shops || 'Not provided'} --- COMMUNICATION PREFERENCES --- Best Communication Method: ${qData.commMethod || 'Not provided'} Best Time of Day: ${qData.commTime || 'Not provided'} Detail Preference: ${qData.detailLevel || 'Not provided'} --- FUN QUESTIONS --- Coffee Order or Favorite Drink: ${qData.coffeeOrder || 'Not provided'} Favorite Music, Movie, or TV Show: ${qData.entertainment || 'Not provided'} Dream Home in 3 Words: ${qData.threeWords || 'Not provided'} --- FINAL THOUGHTS --- What Would Make This a Win: ${qData.winExperience || 'Not provided'} Anything Else: ${qData.anythingElse || 'Not provided'} How Did You Hear About Us: ${qData.hearAboutUs || 'Not provided'}`; try { await onContactSubmit({ name: qData.name, email: qData.email, phone: qData.phone, message, }); setQStatus('sent'); setQData({ name: '', email: '', phone: '', city: '', mustHaves: '', dealbreaker: '', excitesMost: '', biggestConcerns: '', homeType: '', childrenPets: '', hobbies: '', hangouts: '', snacks: '', interests: '', shops: '', commMethod: '', commTime: '', detailLevel: '', coffeeOrder: '', entertainment: '', threeWords: '', winExperience: '', anythingElse: '', hearAboutUs: '', }); // Reset complete } catch { setQStatus('error'); } }; const scrollToForm = () => { document.getElementById('questionnaire-section')?.scrollIntoView({ behavior: 'smooth' }); }; return (

{/* Header */}

Mortgage Advisor

{/* Desktop Nav */}

Leave a Review Find My Rate

{/* Mobile Toggle */}

{/* Mobile Menu */} {mobileOpen && (

setMobileOpen(false)}>Home setMobileOpen(false)}>Services setMobileOpen(false)}>About setMobileOpen(false)}>Homeowner Portal setMobileOpen(false)}>For Agents setMobileOpen(false)}>Blog setMobileOpen(false)}>Contact setMobileOpen(false)}>Leave a Review

setMobileOpen(false)} > Find My Rate

)}

{/* Hero */}

Client Connection Profile

Let's Get to Know You

The best mortgage experience starts with a relationship. Help us get to know you beyond the paperwork so we can better serve you before, during, and long after your home purchase.

Call Neil

32 Five-Star Reviews NMLS {branding.nmls} Licensed in 5 States

{branding.headshotUrl ? ( Neil Shelton

) : (

)}

{/* Why It Matters */}

A Better Homebuying Experience Starts Here

The more we know about you, the better we can guide you throughout your home search and create an experience that's truly personalized.

Find the Right Home Faster

Help us understand what matters most so we can focus on homes that fit your lifestyle, goals, and budget.

Personalize Your Experience

From communication preferences to favorite coffee shops, the little details help us create memorable moments throughout your journey.

Work Better as One Team

Your responses are shared with both your Realtor and lending team so we're all working toward the same goal—helping you find the perfect home.

{/* Questionnaire Section */}

Let's Get to Know You

Takes about 3 minutes. Your information is kept confidential and shared only with Neil and your buyer's agent.

{qStatus === 'sent' ? (

Thank You!

We're excited to be part of your homebuying journey.

Your answers help us provide a more personal experience—not just during your loan, but long after you've settled into your new home.

Our goal is simple: To become your mortgage team for life.

Thank you for trusting us with one of life's biggest milestones. We can't wait to celebrate with you on closing day!

) : (

{/* Section: Basic Information */}

Basic Information

Full Name(s) * setQData({ ...qData, name: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="Jane and John Smith" />

Email * setQData({ ...qData, email: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="jane@example.com" />

Phone setQData({ ...qData, phone: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="(555) 123-4567" />

What city or area are you hoping to buy in? setQData({ ...qData, city: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Lakeland, FL" />

{/* Section: Your Home Search */}

Your Home Search

What are the top 3 "must-haves" in your future home?

setQData({ ...qData, mustHaves: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., 3 bedrooms, fenced yard, open-concept kitchen" />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What is one thing you absolutely do NOT want in a home?</label>
                      <input type="text" value={qData.dealbreaker} onChange={(e) => setQData({ ...qData, dealbreaker: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., No HOA, no carpet, no busy streets" />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What are you most looking forward to once you're in your new home?</label>
                      <textarea rows={2} value={qData.excitesMost} onChange={(e) => setQData({ ...qData, excitesMost: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="Tell us what you're looking forward to..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What's your biggest concern about buying a home, and how can we help make the process easier?</label>
                      <textarea rows={2} value={qData.biggestConcerns} onChange={(e) => setQData({ ...qData, biggestConcerns: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Down payment, credit score, timeline..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Are you looking for your "forever home," starter home, investment property, or something else?</label>
                      <input type="text" value={qData.homeType} onChange={(e) => setQData({ ...qData, homeType: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Forever home for our growing family" />
                    </div>
                  </div>
                </div>

{/* Section: Getting to Know You */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-display font-bold text-lg" style={{ backgroundColor: branding.secondaryColor }}>3</div>
                    <h3 className="font-display text-2xl font-bold" style={{ color: branding.primaryColor }}>Getting to Know You</h3>
                  </div>
                  <div className="space-y-6">
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Do you have children or pets? Tell us about them!</label>
                      <textarea rows={2} value={qData.childrenPets} onChange={(e) => setQData({ ...qData, childrenPets: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Two kids (ages 5 and 8) and a golden retriever named Buddy" />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What do you enjoy doing outside of work?</label>
                      <textarea rows={2} value={qData.hobbies} onChange={(e) => setQData({ ...qData, hobbies: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Hiking, gardening, weekend brunch spots..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What's your favorite local restaurant, coffee shop, or hidden gem?</label>
                      <textarea rows={2} value={qData.hangouts} onChange={(e) => setQData({ ...qData, hangouts: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="Share your go-to spots..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Favorite snacks, drinks, or treats?</label>
                      <input type="text" value={qData.snacks} onChange={(e) => setQData({ ...qData, snacks: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Dark chocolate, cold brew, hot Cheetos..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Any hobbies, sports teams, or interests we should know about?</label>
                      <textarea rows={2} value={qData.interests} onChange={(e) => setQData({ ...qData, interests: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Die-hard Bucs fan, love paddleboarding, collect vinyl..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Favorite places to shop (Target, Amazon, HomeGoods, Costco, etc.)?</label>
                      <input type="text" value={qData.shops} onChange={(e) => setQData({ ...qData, shops: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Costco, HomeGoods, local farmers market..." />
                    </div>
                  </div>
                </div>

{/* Section: Communication Preferences */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-display font-bold text-lg" style={{ backgroundColor: branding.secondaryColor }}>4</div>
                    <h3 className="font-display text-2xl font-bold" style={{ color: branding.primaryColor }}>Communication Preferences</h3>
                  </div>
                  <div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What's the best way to communicate with you?</label>
                      <select value={qData.commMethod} onChange={(e) => setQData({ ...qData, commMethod: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all bg-white">
                        <option value="">Select one...</option>
                        <option value="Call">Phone Call</option>
                        <option value="Text">Text Message</option>
                        <option value="Email">Email</option>
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What time of day is usually best?</label>
                      <select value={qData.commTime} onChange={(e) => setQData({ ...qData, commTime: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all bg-white">
                        <option value="">Select one...</option>
                        <option value="Morning">Morning</option>
                        <option value="Afternoon">Afternoon</option>
                        <option value="Evening">Evening</option>
                      </select>
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Do you prefer detailed explanations or quick summaries?</label>
                      <select value={qData.detailLevel} onChange={(e) => setQData({ ...qData, detailLevel: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all bg-white">
                        <option value="">Select one...</option>
                        <option value="Detailed">Detailed explanations</option>
                        <option value="Quick">Quick & simple summaries</option>
                        <option value="Depends">Depends on the situation</option>
                      </select>
                    </div>
                  </div>
                </div>

{/* Section: Fun Questions */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-display font-bold text-lg" style={{ backgroundColor: branding.secondaryColor }}>5</div>
                    <h3 className="font-display text-2xl font-bold" style={{ color: branding.primaryColor }}>Fun Questions</h3>
                  </div>
                  <div className="space-y-6">
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Coffee order or favorite drink?</label>
                      <input type="text" value={qData.coffeeOrder} onChange={(e) => setQData({ ...qData, coffeeOrder: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Iced oat milk latte, black coffee, sweet tea..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Favorite music artist, movie, or TV show?</label>
                      <input type="text" value={qData.entertainment} onChange={(e) => setQData({ ...qData, entertainment: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., The Office, Taylor Swift, anything Marvel..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">If you could describe your dream home in 3 words, what would they be?</label>
                      <input type="text" value={qData.threeWords} onChange={(e) => setQData({ ...qData, threeWords: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Bright, cozy, spacious" />
                    </div>
                  </div>
                </div>

{/* Section: Final Thoughts */}
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-display font-bold text-lg" style={{ backgroundColor: branding.secondaryColor }}>6</div>
                    <h3 className="font-display text-2xl font-bold" style={{ color: branding.primaryColor }}>Final Thoughts</h3>
                  </div>
                  <div className="space-y-6">
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">How did you hear about us?</label>
                      <input type="text" value={qData.hearAboutUs} onChange={(e) => setQData({ ...qData, hearAboutUs: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Referral from a friend, Google search, social media, past client..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">What would make this homebuying experience feel like a win for you?</label>
                      <textarea rows={3} value={qData.winExperience} onChange={(e) => setQData({ ...qData, winExperience: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="e.g., Closing before the school year starts, staying under budget, finding a neighborhood with great parks..." />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-neutral-700 mb-2">Is there anything else you'd like your Realtor and lending team to know about you?</label>
                      <textarea rows={3} value={qData.anythingElse} onChange={(e) => setQData({ ...qData, anythingElse: e.target.value })} className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all" placeholder="Any details, preferences, or concerns we should keep in mind..." />
                    </div>
                  </div>
                </div>

<div className="pt-6">
                  <button
                    type="submit"
                    disabled={qStatus === 'sending'}
                    className="w-full py-4 rounded-lg font-semibold text-white transition-all duration-200 hover:brightness-110 active:translate-y-[1px] shadow-lg disabled:opacity-70 disabled:cursor-not-allowed"
                    style={{ backgroundColor: branding.primaryColor }}
                  >
                    {qStatus === 'sending' ? (
                      <span className="flex items-center justify-center gap-2">
                        <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                        Submitting...
                      </span>
                    ) : (
                      'Submit Questionnaire'
                    )}
                  </button>
                  {qStatus === 'error' && (
                    <p className="text-center text-red-600 text-sm mt-4">
                      Something went wrong. Please try again.{' '}
                      <button type="button" onClick={() => setQStatus('idle')} className="underline font-medium">Retry</button>
                    </p>
                  )}
                </div>
              </form>
            )}
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section style={{ backgroundColor: branding.primaryColor }} className="py-20 md:py-28">
        <div className="max-w-7xl mx-auto px-6">
          <h2 className="font-display text-3xl md:text-5xl font-bold text-white text-center mb-16">
            What Homebuyers Say About Neil
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="md:col-span-2 bg-white/5 border border-white/10 rounded-xl p-8 md:p-10">
              <p className="text-white/90 font-body leading-relaxed text-lg md:text-xl">
                "Neil was absolutely outstanding throughout our entire mortgage process. He was knowledgeable, responsive, patient, and made what could have been a stressful experience feel smooth and manageable from start to finish. He took the time to explain every step, answered all of our questions quickly, and worked hard to find the best options for our situation. Five-star service all the way!"
              </p>
              <div className="mt-6 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white font-bold text-sm font-display">TB</div>
                <div>
                  <div className="text-white font-semibold">Tammy B.</div>
                  <div className="text-white/60 text-sm">May 2026</div>
                </div>
              </div>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-8">
              <p className="text-white/90 font-body leading-relaxed">
                "Absolutely fantastic experience. Helped me start to finish buying my first house. 10/10 recommend."
              </p>
              <div className="mt-6 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white font-bold text-sm font-display">DK</div>
                <div>
                  <div className="text-white font-semibold">David K.</div>
                  <div className="text-white/60 text-sm">December 2025</div>
                </div>
              </div>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-8">
              <p className="text-white/90 font-body leading-relaxed">
                "My wife and I had a great experience working with Neil while purchasing our first home. He was very knowledgeable, his communication was great, and he made the entire process about as smooth as it could possibly be."
              </p>
              <div className="mt-6 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white font-bold text-sm font-display">LC</div>
                <div>
                  <div className="text-white font-semibold">Lewis C.</div>
                  <div className="text-white/60 text-sm">May 2026</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* About Neil */}
      <section className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
          <div className="relative">
            {branding.headshotUrl ? (
              <img src={branding.headshotUrl} alt="Neil Shelton" className="w-full max-w-md mx-auto rounded-2xl shadow-2xl" />
            ) : (
              <div className="w-full max-w-md mx-auto h-96 rounded-2xl bg-neutral-200 flex items-center justify-center text-neutral-400 font-display text-4xl">NS</div>
            )}
            <div className="absolute -bottom-6 -right-2 md:right-8 bg-white p-6 rounded-xl shadow-xl border border-neutral-100 max-w-xs">
              <div className="font-display text-3xl font-bold" style={{ color: branding.primaryColor }}>32+</div>
              <div className="text-neutral-500 text-sm">Five-Star Reviews</div>
            </div>
          </div>
          <div>
            <h2 className="font-display text-3xl md:text-5xl font-bold tracking-tight" style={{ color: branding.primaryColor }}>
              Meet Neil Shelton
            </h2>
            <p className="mt-6 text-lg text-neutral-600 font-body leading-relaxed">
              Neil Shelton is a Mortgage Advisor with Edge Home Finance, helping families across AL, CO, FL, IL, and WI navigate the homebuying process with confidence. Whether you're a first-time buyer or relocating across the country, Neil's commitment to clear communication and relentless problem-solving ensures you never feel left in the dark.
            </p>
            <p className="mt-4 text-lg text-neutral-600 font-body leading-relaxed">
              His goal is simple: to make your mortgage experience smooth, transparent, and tailored to your life — not just your loan.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <div className="px-5 py-3 rounded-lg bg-[#f8f7f5] border border-neutral-200">
                <div className="text-sm text-neutral-500">NMLS</div>
                <div className="font-display font-bold text-lg" style={{ color: branding.primaryColor }}>{branding.nmls}</div>
              </div>
              <div className="px-5 py-3 rounded-lg bg-[#f8f7f5] border border-neutral-200">
                <div className="text-sm text-neutral-500">Company NMLS</div>
                <div className="font-display font-bold text-lg" style={{ color: branding.primaryColor }}>{branding.companyNmls}</div>
              </div>
              <div className="px-5 py-3 rounded-lg bg-[#f8f7f5] border border-neutral-200">
                <div className="text-sm text-neutral-500">Experience</div>
                <div className="font-display font-bold text-lg" style={{ color: branding.primaryColor }}>5+ Years</div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Native Contact Form (Secondary) */}
      <section className="py-20 md:py-28 bg-[#f8f7f5]">
        <div className="max-w-3xl mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="font-display text-3xl md:text-4xl font-bold tracking-tight" style={{ color: branding.primaryColor }}>
              Prefer to Talk First?
            </h2>
            <p className="mt-4 text-lg text-neutral-600 font-body">
              Send Neil a quick message and he'll reach out within 24 hours.
            </p>
          </div>
          <div className="bg-white rounded-2xl shadow-xl border border-neutral-200 p-8 md:p-12">
            {status === 'sent' ? (
              <div className="text-center py-12">
                <div className="w-16 h-16 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-6">
                  <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
                </div>
                <h3 className="font-display text-2xl font-bold text-neutral-900">Message Sent!</h3>
                <p className="mt-2 text-neutral-600">Neil will be in touch shortly.</p>
                <button onClick={() => setStatus('idle')} className="mt-6 px-6 py-2 rounded-lg border border-neutral-300 text-neutral-700 font-medium hover:bg-neutral-50 transition-colors">
                  Send another message
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-semibold text-neutral-700 mb-2">Full Name *</label>
                    <input
                      type="text"
                      required
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all"
                      placeholder="Jane Smith"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-neutral-700 mb-2">Email *</label>
                    <input
                      type="email"
                      required
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all"
                      placeholder="jane@example.com"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-neutral-700 mb-2">Phone</label>
                  <input
                    type="tel"
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                    className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all"
                    placeholder="(555) 123-4567"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-neutral-700 mb-2">Message</label>
                  <textarea
                    rows={4}
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                    className="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:border-transparent transition-all"
                    placeholder="How can Neil help you?"
                  />
                </div>
                <button
                  type="submit"
                  disabled={status === 'sending'}
                  className="w-full py-4 rounded-lg font-semibold text-white transition-all duration-200 hover:brightness-110 active:translate-y-[1px] shadow-lg disabled:opacity-70 disabled:cursor-not-allowed"
                  style={{ backgroundColor: branding.primaryColor }}
                >
                  {status === 'sending' ? (
                    <span className="flex items-center justify-center gap-2">
                      <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                      Sending...
                    </span>
                  ) : (
                    'Send Message to Neil'
                  )}
                </button>
                {status === 'error' && (
                  <p className="text-center text-red-600 text-sm">
                    Something went wrong. Please try again.{' '}
                    <button type="button" onClick={() => setStatus('idle')} className="underline font-medium">
                      Retry
                    </button>
                  </p>
                )}
              </form>
            )}
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="py-12 border-t border-neutral-200 bg-white">
        <div className="max-w-7xl mx-auto px-6 text-center">
          {branding.logoUrl && (
            <img src={branding.logoUrl} alt="Edge Home Finance" className="h-10 mx-auto mb-6" />
          )}
          <p className="text-xs md:text-sm text-neutral-500 font-body max-w-4xl mx-auto leading-relaxed">
            {branding.disclaimer}
          </p>
          <div className="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-neutral-400">
            <a href={`mailto:${branding.email}`} className="hover:text-neutral-600 transition-colors">{branding.email}</a>
            <a href={`tel:${branding.phone}`} className="hover:text-neutral-600 transition-colors">{branding.phone}</a>
            {branding.privacyPolicyUrl && (
              <a href={branding.privacyPolicyUrl} target="_blank" rel="noopener noreferrer" className="hover:text-neutral-600 transition-colors">Privacy Policy</a>
            )}
            {branding.meetingLink && (
              <a href={branding.meetingLink} target="_blank" rel="noopener noreferrer" className="hover:text-neutral-600 transition-colors">Schedule a Call</a>
            )}
          </div>
        </div>
      </footer>
    </div>
  );
}</article></body></html>

Neil Shelton | Mortgage Advisor